import React from "react";
import { Button, Form, Input, Select, Space, Table, Tag } from "antd";
import "./Yuangongguanli.less";
const { Option } = Select;
export default function Yuangongguanli() {
  const onFinish = (e) => {
    console.log(e);
  };
  const onFinishFailed = () => {
    console.log(222);
  };
  const columns = [
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
      // render: (text) => <span>{text}</span>,
    },
    {
      title: "Age",
      dataIndex: "age",
      key: "age",
    },
    {
      title: "Address",
      dataIndex: "address",
      key: "address",
    },
    {
      title: "Tags",
      key: "tags",
      dataIndex: "tags",
      render: (_, { tags }) => (
        <>
          {tags.map((tag) => {
            let color = tag.length > 5 ? "geekblue" : "green";

            if (tag === "loser") {
              color = "volcano";
            }

            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <Button type="primary">{record.action.del}</Button>
          <Button>{record.action.add}</Button>
        </Space>
      ),
    },
  ];
  const data = [
    {
      key: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
      tags: ["nice", "developer"],
      action: { add: "编辑", del: "删除" },
    },
    {
      key: "2",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
      tags: ["loser"],
      action: { add: "编辑", del: "删除" },
    },
    {
      key: "3",
      name: "Joe Black",
      age: 32,
      address: "Sidney No. 1 Lake Park",
      tags: ["cool", "teacher"],
      action: { add: "编辑", del: "删除" },
    },
  ];
  return (
    <>
      <Form
        className="form"
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ userDep:'lucy' }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          className="form-item"
          label="员工姓名"
          name="username"
          rules={[{ required: false, message: "Please input your username!" }]}
        >
          <Input className="item-input" />
        </Form.Item>

        <Form.Item
          className="form-item"
          label="联系方式"
          name="password"
          rules={[{ required: false, message: "Please input your password!" }]}
        >
          <Input className="item-input" />
        </Form.Item>

        <Form.Item
          className="form-item"
          label="身份证号"
          name="userNum"
          rules={[{ required: false, message: "Please input your password!" }]}
        >
          <Input className="item-input" />
        </Form.Item>

        <Form.Item
          className="form-item"
          label="所属部门"
          name="userDep"
          rules={[{ required: false, message: "Please input your password!" }]}
        >
          <Select  style={{ width: "80%" }}>
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
            <Option value="disabled" disabled>
              Disabled
            </Option>
            <Option value="Yiminghe">yiminghe</Option>
          </Select>
        </Form.Item>

        <Form.Item
          className="form-item"
          label="所属岗位"
          name="userDep"
          rules={[{ required: false, message: "Please input your password!" }]}
        >
          <Select style={{ width: "80%" }}>
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
            <Option value="disabled" disabled>
              Disabled
            </Option>
            <Option value="Yiminghe">yiminghe</Option>
          </Select>
        </Form.Item>

        <Form.Item
          className="form-item"
          label="状态"
          name="userState"
          rules={[{ required: false, message: "Please input your password!" }]}
        >
          <Select  style={{ width: "80%" }}>
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
            <Option value="disabled" disabled>
              Disabled
            </Option>
            <Option value="Yiminghe">yiminghe</Option>
          </Select>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }} className="item-subMit">
          <Button type="primary" htmlType="submit">
            查询
          </Button>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="">重置</Button>
        </Form.Item>
      </Form>
      <Button type="primary" className="addBtn" size="large">
        新增
      </Button>
      <Table columns={columns} dataSource={data} />
    </>
  );
}
